<template>
    <div class="pie-container self">
        <public-title title="步数" :theme-type="themeType" />
        <div class="inner" ref="healthChart"></div>
        <div class="count">
            <div class="t">总人数</div>
            <div class="v">{{ total }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { ref, watch } from 'vue';
    import * as echarts from 'echarts';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
    import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
    import { screenPie } from '/@/components/item-d/pieCharts.ts';
    import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';

    const props = defineProps({
        orgCode: String,
        type: String,
        themeType: String,
    });
    const { setSession, getSession } = useSession();
    const { PAGE2_RIGHT2 } = caching;
    watch(
        props,
        () => {
            init();
        },
        { immediate: true, deep: true }
    );
    const healthChart = ref<HTMLElement>();
    const { total, setStep, getStepData } = useStep();

    async function init() {
        try {
            const params = {
                orgCode: props.orgCode,
                type: props.type,
            };
            const { code, result } = await getStep(params);
            if (code == 200) {
                setValue(result);
                setSession(PAGE2_RIGHT2, JSON.stringify(result));
            }
        } catch {
            const result = JSON.parse(getSession(PAGE2_RIGHT2));
            setValue(result);
        }
    }

    function setValue(result) {
        setStep(result);
        initChart(getStepData());
    }

    function initChart(chartData) {
        let myChart = echarts.init(healthChart.value);
        let options = screenPie(chartData);
        myChart.setOption(options);
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    }
</script>
<style scoped lang="less">
    .inner {
        width: 100%;
        margin: 0 auto;
        height: calc(100% - 40px);
    }

    .pie-container.self {
        position: relative;
        padding-bottom: 0 !important;
    }

    .count {
        position: absolute;
        width: 71%;
        top: 51%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 22px;
        font-weight: bold;
        z-index: 1;
        pointer-events: none;

        > div {
            width: 80px;
            z-index: 0;
        }

        .t {
            font-size: 14px;
            font-weight: normal;
        }
    }
</style>
